<!DOCTYPE html>
<html>
<head>
	<title>css-box</title>
	<meta charset="utf-8">
	<style type="text/css">
		div.ex{
			width: 220px;
			border: 3px solid gray;
			margin: 10px;
			padding: 10px;
		}
		p.one{
			width: 210px;
			border: 1px;
			border-style: solid;
			border-width: 5px;
			padding: 10px;
			margin: 100px;
			margin-left: 10px;
			margin-top: 10px;
		}
		
		p.two{
			border-style: solid;
			border: 1px;
		}

		h1,h2,h3{
			color:green;
		}

		div.ex2{
			background-color: yellow;
		}

		div.ex2 h4
		{
			font-size: 40px;
		}
	</style>
</head>
<body>
	<img src="css/img/w3css.gif" width="250" height="250">
	<div class="ex">
		the picture above is ahout css box
	</div>

	<div >
		<p class="one">this is one item to show!</p>
	</div>

	<h1>this is test1</h1>
	<h2>this is test2</h2>
	<h3>this is test3</h3>

	<div class="ex2">
		<h4 class="ex">new content with class ex</h4>	
	</div>
</body>
</html>